<div class="layui-form" lay-filter="form-banner" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入轮播图名称" type="text" class="layui-input" maxlength="50"
                   lay-verType="tips" lay-verify="required" lay-verType="tips" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图</label>
        <div class="layui-input-inline">
            <input type="hidden" id="imageUrl" name="imageUrl" placeholder="选择轮播图" type="text" class="layui-input"
                   lay-verType="tips"
                   lay-verify="required"/>
            <button type="button" class="layui-btn layui-btn-primary" id="LAY_ImageUrl_Upload">
                <i class="layui-icon">&#xe67c;</i>上传图片(750*375)
            </button>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" id="backGround" name="backGround" placeholder="请输入背景颜色" type="text" class="layui-input"
                   lay-verType="tips"
                   lay-verify="required"/>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="backgroundSelect"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序号</label>
        <div class="layui-input-block">
            <input name="sort" placeholder="请输入排序号" type="number" class="layui-input" min="0" max="1000"
                   lay-verType="tips" lay-verify="number"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="LAY-banner-add-submit" value="确认"
                   class="layui-btn layui-btn-fluid">
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'setter', 'upload', 'colorpicker'], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , upload = layui.upload
            , colorpicker = layui.colorpicker
            , setter = layui.setter;

        var apiUrl = setter.apiUrl;

        form.render('select');

        var imageUrlSrc = $('#imageUrl');
        var uploadIns = upload.render({
            url: apiUrl + '/mapi/file/upload'
            , headers: {'token': layui.data(setter.tableName).token}
            , elem: '#LAY_ImageUrl_Upload',
            before: function () {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            , done: function (res) {
                layer.close(layer.msg());
                if (res.code === 0) {
                    imageUrlSrc.val(res.data.url);
                    showLogo();
                    uploadIns.config.elem.next()[0].value = '';
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            }
        });

        //表单赋值
        colorpicker.render({
            elem: '#backgroundSelect'
            , color: 'rgb(68,66,66)'
            , format: 'rgb' //默认为 hex
            , done: function (color) {
                $('#backGround').val(color);
            }
        });

        //查看头像
        admin.events.imageUrlPreview = function (othis) {
            var src = imageUrlSrc.val();
            layer.photos({
                photos: {
                    "title": "查看图标" //相册标题
                    , "data": [{
                        "src": src //原图地址
                    }]
                }
                , shade: 0.01
                , closeBtn: 1
                , anim: 5
            });
        };

        function showLogo() {
            var src = imageUrlSrc.val();
            layer.photos({
                photos: {
                    "title": "查看图片" //相册标题
                    , "data": [{
                        "src": src //原图地址
                    }]
                }
                , shade: 0.01
                , closeBtn: 1
                , anim: 5
            });
        }

    });


</script>